<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>操作属性</title>
    <style>
        p { margin: 8px; font-size:16px; }
        .selected { color:blue; }
        .highlight { background:yellow; }
    </style>
</head>
<script src="../js/jquery-3.4.1.js"></script>
<script>
    $(function () {
        //获取值设置值
        console.log($("p:first").text());
        console.log($("p:first").html());
        $("#userName").val("张三");
        $("input[type='radio']").val(["0"]);
        $("input[type='checkbox']").val(["0", "1"]);
        $("#single").val("2018级");
        $("#multiple").val(["体育", "读书"]);
        //添加获取删除属性
        $("p:eq(1)").addClass("selected");
        $("p").eq(2).addClass("highlight");
        $("p").eq(2).removeClass("highlight");
        $("p").eq(2).toggleClass("highlight");
        $("p").eq(2).css("background","yellow");
        console.log($("p").eq(2).css("background"));
        $("p:first").attr("id","first-p");
        console.log($("p:first").attr("id"));
        $("p:first").removeAttr("id");

        $("input[type='checkbox']").prop("checked", function( i, val ) {
            return !val;
        });
        $(":checkbox").prop("disabled",true);
    })
</script>
<body>
<p>Hello</p>
<p>and</p>
<p>Goodbye</p>
姓名：<input type="text" name="userName" id="userName"><br/>
性别：<input type="radio" name="sex" value="0">男<input type="radio" name="sex" value="1">女<br/>
爱好：<input type="checkbox" value="0">唱歌<input type="checkbox" value="1">跳舞
<input type="checkbox" value="2">书法<br/>
年级：<select id="single">
    <option value="2017">2017级</option>
    <option value="2018">2018级</option>
</select><br/>
爱好：<select id="multiple" multiple="multiple">
    <option selected="selected">音乐</option>
    <option>体育</option>
    <option selected="selected">读书</option>
</select><br/>

</body>
</html>